<nz-spin [nzSpinning]="loading">
  <h4 class="card__title mb-md">
    {{title}}
    <range-picker nzAllowClear="false" [nzFormat]="'YYYY-MM-DD'" [(ngModel)]="i.start" [(ngModelEnd)]="i.end"
      [shortcut]="true" (nzOnOpenChange)="onDateChange($event)"></range-picker>

    <nz-radio-group [nzDisabled]="noData" [(ngModel)]="showType" nzSize="small">
      <label nz-radio-button nzValue="chart"><i nz-icon nzType="pie-chart"></i></label>
      <label nz-radio-button nzValue="list"><i nz-icon nzType="table"></i></label>
    </nz-radio-group>
  </h4>
  <div nz-row nzGutter="16">
    <div nz-col nzSpan="24">
      <nz-empty *ngIf="noData"></nz-empty>
      <nz-skeleton *ngIf="loading && showType !== 'list'"></nz-skeleton>
      <ng-container *ngIf="!noData">
        <g2-custom *ngIf="!loading" [hidden]="showType == 'list'" (render)="render($event)"></g2-custom>
        <div [hidden]="showType == 'chart'">
          <nz-table [nzLoading]="loading" class="weektable" [nzData]="data" [nzScroll]="scrollConfig"
            [nzShowPagination]="false" nzSize="small" style="min-height: 400px; margin-top: 30px">
            <thead>
              <tr>
                <th nzLeft="0px">产品/周</th>
                <th *ngFor="let col of cols">{{col}}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td nzLeft="0px">代销</td>
                <td *ngFor="let td of table['代销']">{{td}}</td>
              </tr>
              <tr>
                <td nzLeft="0px">实销</td>
                <td *ngFor="let td of table['实销']">{{td}}</td>
              </tr>
              <tr>
                <td nzLeft="0px">销售倍数</td>
                <td *ngFor="let td of table['销售倍数']">{{td.toFixed(2)}}</td>
              </tr>
              <tr>
                <td nzLeft="0px">新门店数</td>
                <td *ngFor="let td of table['新门店数']">{{td}}</td>
              </tr>
              <tr>
                <td nzLeft="0px">累计代销</td>
                <td *ngFor="let td of table['累计代销']">{{td}}</td>
              </tr>
              <tr>
                <td nzLeft="0px">累计实销</td>
                <td *ngFor="let td of table['累计实销']">{{td}}</td>
              </tr>
              <tr>
                <td nzLeft="0px">累计门店数</td>
                <td *ngFor="let td of table['累计门店数']">{{td}}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </ng-container>
    </div>
  </div>
  <div class="card__time" [ngStyle]="{ visibility: time ? 'visible' : 'hidden' }">更新于: {{ time | _date }}</div>
</nz-spin>
